<template>
  <view class="root">
    <view class="form">
      <view class="inline-input">
        <p>优惠券名称</p>
        <input class="input" v-model="couponName" />
      </view>

      <p>优惠券类型</p>
	  <p>{{}}</p>
      <view class="radio-group">
        <radio-group @change="radioChange">
          <label>
            <radio value="131" /> 满减券
          </label>
          <label>
            <radio value="130" /> 打折券
          </label>
        </radio-group>
      </view>

      <view v-if="couponType === '131'">
        <view class="inline-input">
          <p>满</p>
          <!-- <input class="input-small" v-model="conditionMet" /> -->
		  <uni-number-box :min="0" :max="10000" v-model="conditionMet" />
          <p>元减</p>
          <!-- <input class="input-small" v-model="discountAmount" /> -->
		  <uni-number-box :min="0" :max="10000" v-model="discountAmount" />
        </view>
      </view>
      <view v-else>
        <view class="inline-input">
          <p>打</p>
          <!-- <input class="input-small" v-model="discount" /> -->
		  		  <uni-number-box :min="0" :max="100" v-model="discount" />
          <p>折</p>
        </view>
      </view>

      <view class="inline-input">
        <p>发放开始时间</p>
<!--        <picker mode="date" :value="startDate" @change="onStartDateChange">
          <view class="input-time">{{ startDate }}</view>
        </picker> -->
				<view class="example-body">
					<uni-datetime-picker
						type="datetime"
						v-model="startDate"
						@change="changestartDate"
					/>
				</view>
      </view>
      <view class="inline-input">
        <p>发放结束时间</p>
<!--        <picker mode="date" :value="endDate" @change="onEndDateChange">
          <view class="input-time">{{ endDate }}</view>
        </picker> -->
		<view class="example-body">
			<uni-datetime-picker
				type="datetime"
				v-model="endDate"
				@change="changeendDate"
			/>
		</view>
      </view>

      <!-- 投放数量和每人限领共行 -->
      <view class="inline-input">
        <p>投放数量</p>
        <!-- <input class="input-small" v-model="quantity" /> -->
			<uni-number-box :min="1" :max="10000" v-model="quantity" />
      </view>

      <view class="inline-input">
        <p>每人限领</p>
        <!-- <input class="input-small" v-model="limitPerPerson" /> -->
			<uni-number-box :min="1" :max="1" v-model="limitPerPerson" />
      </view>

      <view class="inline-input">
        <p>使用有效期</p>
<!--        <picker mode="date" :value="validFrom" @change="onValidFromChange">
          <view class="input-time">{{ validFrom }}</view>
        </picker>

        <picker mode="date" :value="validTo" @change="onValidToChange">
          <view class="input-time">{{ validTo }}</view>
        </picker> -->
		<uni-datetime-picker
			type="datetime"
			v-model="validFrom"
			@change="changevalidFrom"
		/>
			<uni-datetime-picker
				type="datetime"
				v-model="validTo"
				@change="changevalidTo"
			/>
      </view>
    </view>

    <view class="button" @click="confirmLaunch">确认投放</view>
  </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import uniDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue';
import request from '../../../../utils/request';
  import { getUserProfile } from "@/api/system/user"
const couponName = ref('');//优惠券名称
const couponType = ref('131');//优惠券类型
const conditionMet = ref('');//满足金额
const discountAmount = ref(0);//减免金额
const discount = ref(0);//折扣力度
const startDate = ref(''); // 默认当前日期
const endDate = ref(''); // 默认当前日期
const quantity = ref(1); //投放数量
const limitPerPerson = ref(1); //每人限领
const validFrom = ref(''); // 默认当前日期
const validTo = ref(''); // 默认当前日期
const merchantId=ref('')


const onValidFromChange = (e) => {
  validFrom.value = e.detail.value;
};

const onValidToChange = (e) => {
  validTo.value = e.detail.value;
};

   
   onMounted(()=>{
	   couponType.value=131
	   getUserProfile().then((res)=>{
	   	  merchantId.value=res.data.userId
	   }).catch((err)=>{
	   	   console.log(err)
	   })
   })
   
   //获取当前的时间
   function getCurrentDateTime() {
     const now = new Date();
     
     const year = now.getFullYear();
     const month = now.getMonth() + 1;    // 月份从0开始，需+1
     const day = now.getDate();
     const hours = now.getHours();
     const minutes = String(now.getMinutes()).padStart(2, '0');  // 补零
     const seconds = String(now.getSeconds()).padStart(2, '0');  // 补零
   
     // 拼接成目标格式（月、日、小时不补零，分钟和秒补零）
     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
   }
   
   //解析时间
   function parseDateTime(datetimeStr) {
     const [datePart, timePart] = datetimeStr.split(' ');
     const [year, month, day] = datePart.split('-').map(Number);
     const [hours, minutes, seconds] = timePart.split(':').map(Number);
     // 注意：月份从0开始，所以需减1
     return new Date(year, month - 1, day, hours, minutes, seconds);
   }
   
const confirmLaunch = () => {
		//首先判断  商户选择的时间必须大于现在的时间
		//开始获取现在的时间
		const now = getCurrentDateTime()
		//开始解析时间
		const nowtime = parseDateTime(now.toString())
		if(startDate.value===''||startDate.value===undefined||
		endDate.value===''||endDate.value===undefined||validFrom.value===''||
		validFrom.value===undefined||validTo.value===''||validTo.value===undefined){
				uni.showModal({
				  title: '提示',
				  content: '四个时间参数填写不完整', // 支持多行文本
				  showCancel: false,      // 不显示取消按钮
				  confirmText: '知道了',  // 自定义按钮文字
				  success: () => {
					// 用户点击确认后的回调
				  }
				});
			return;
		}else{
			const startTime= parseDateTime(startDate.value)
			const endTime = parseDateTime(endDate.value)
			const startValidTime = parseDateTime(validFrom.value)
			const endValidTime = parseDateTime(validTo.value)
			
			
			//现在的时间大于开始时间
			if(nowtime>startTime){
					uni.showModal({
					  title: '提示',
					  content: '现在的时间大于开始时间，请调整时间范围', // 支持多行文本
					  showCancel: false,      // 不显示取消按钮
					  confirmText: '知道了',  // 自定义按钮文字
					  success: () => {
						// 用户点击确认后的回调
					  }
					});
				return;
			}else if(endTime<nowtime){
				uni.showModal({
					  title: '提示',
					  content: '现在的时间大于结束时间，请调整时间范围', // 支持多行文本
					  showCancel: false,      // 不显示取消按钮
					  confirmText: '知道了',  // 自定义按钮文字
					  success: () => {
						// 用户点击确认后的回调
					  }
					});
				return;
			}else if(endTime<startTime){
				uni.showModal({
					  title: '提示',
					  content: '开始时间晚于结束时间，请调整时间范围', // 支持多行文本
					  showCancel: false,      // 不显示取消按钮
					  confirmText: '知道了',  // 自定义按钮文字
					  success: () => {
						// 用户点击确认后的回调
					  }
					});
				return;
			}else if(startValidTime<nowtime){
				uni.showModal({
					  title: '提示',
					  content: '开始有效期晚于当前的时间,请调整时间范围', // 支持多行文本
					  showCancel: false,      // 不显示取消按钮
					  confirmText: '知道了',  // 自定义按钮文字
					  success: () => {
						// 用户点击确认后的回调
					  }
					});
				return;
			}else if(endValidTime<nowtime){
				uni.showModal({
					  title: '提示',
					  content: '结束有效期晚于当前的时间,请调整时间范围', // 支持多行文本
					  showCancel: false,      // 不显示取消按钮
					  confirmText: '知道了',  // 自定义按钮文字
					  success: () => {
						// 用户点击确认后的回调
					  }
					});
				return;
			}else if(endValidTime<startValidTime){
				uni.showModal({
					  title: '提示',
					  content: '结束有效期晚于开始有效期,请调整时间范围', // 支持多行文本
					  showCancel: false,      // 不显示取消按钮
					  confirmText: '知道了',  // 自定义按钮文字
					  success: () => {
						// 用户点击确认后的回调
					  }
					});
				return;
			}else if(startValidTime<startTime||startValidTime<endTime
			||endValidTime<startTime||endValidTime<endValidTime){
				uni.showModal({
					  title: '提示',
					  content: '请检查你选择的时间顺序', // 支持多行文本
					  showCancel: false,      // 不显示取消按钮
					  confirmText: '知道了',  // 自定义按钮文字
					  success: () => {
						// 用户点击确认后的回调
					  }
					});
				return;
			}
		}
		
		if(couponName.value===''||couponName.value===undefined||couponType.value===''||
		couponType.value===undefined||discountAmount.value===''||discountAmount.value===undefined||
		discount.value===''||discount.value===undefined||startDate.value===''||startDate.value===undefined||
		endDate.value===''||endDate.value===undefined||quantity.value===''||quantity.value===undefined||
		limitPerPerson.value===''||limitPerPerson.value===undefined||validFrom.value===''||
		validFrom.value===undefined||validTo.value===''||validTo.value===undefined){
			uni.showModal({
				  title: '提示',
				  content: '请填写完整的信息', // 支持多行文本
				  showCancel: false,      // 不显示取消按钮
				  confirmText: '知道了',  // 自定义按钮文字
				  success: () => {
					// 用户点击确认后的回调
				  }
				});
			return;
		}else{
			console.log("没问题!!!")
			//开始发放优惠券
				request({
					url:'/gyf/mq/insert',
					method:'post',
					data:{
						couponName:couponName.value,
						couponType:couponType.value,
						conditionMet:conditionMet.value,
						discountAmount:discountAmount.value,
						discountRate:discount.value,
						startTime:startDate.value,
						endTime:endDate.value,
						totalQuantity:quantity.value,
						limitPerPerson:limitPerPerson.value,
						validStartTime:validFrom.value,
						validEndTime:validTo.value,
						status:136,
						merchantId:merchantId.value
					}
				}).then((res)=>{
					console.log(res)
				}).catch((err)=>{
					console.log(err)
				})
			return;
		}
		

		

};

//选择优惠券类型
const radioChange=(e)=>{
	console.log("切换优惠券类型")
	couponType.value=e.detail.value
	console.log(couponType.value)
	if(e.detail.value===131){
		discount.value=0
	}else{
		discountAmount.value=0.00
		conditionMet.value=''
	}
}

//修改开始时间
const changestartDate=(e)=>{
	startDate.value=e
}
//修改结束时间
const changeendDate=(e)=>{
	endDate.value=e
}

//修改优惠券的有效开始时间
const changevalidFrom=(e)=>{
	validFrom.value=e
}

//修改优惠券的使用结束时间
const changevalidTo=(e)=>{
	validTo.value=e
}
</script>

<style scoped>
.root {
  padding: 30px;
  background-color: #f7f9fc;
  font-family: Arial, sans-serif;
}

.form p {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.input {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 15px;
  width: 70%;
  box-sizing: border-box;
  border-radius: 5px;
  font-size: 14px;
  background-color: #fff;
  color: #333; /* 设置输入框文字颜色 */
}

.radio-group {
  display: flex;
  justify-content: space-around;
  margin-bottom: 15px;
}

.radio-group label {
  font-size: 14px;
  color: #555;
}

.inline-input {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 确保文本和输入框垂直居中对齐 */
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.inline-input p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #555;
  line-height: 36px; /* 确保文字与输入框对齐 */
}

.input-small {
  border: 1px solid #ccc;
  padding: 10px;
  width: 30%; /* 调整小输入框宽度 */
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 5px;
  font-size: 14px;
  background-color: #fff;
  color: #333; /* 设置输入框文字颜色 */
}

.input-small:focus,
.input:focus {
  outline: none;
  border-color: #1d6fff;
}

.input-time {
  border: 1px solid #ccc;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 15px;
  border-radius: 5px;
  background-color: #fff;
  color: #333; /* 设置时间选择器文字颜色 */
}

.button {
  background-color: #1D6FFF;
  color: white;
  text-align: center;
  padding: 15px;
  border-radius: 5px;
  width: 80%;
  margin: 25px auto;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #155d9a;
}
</style>
